<template>
<div>
    <el-card class="login-container-custom">
        <div style="padding-bottom: 150px; font-size: 60px; ">工厂配件管理系统</div>
        <h3 class="login-title" style="color: white; font-size: 15px;  font-weight: normal">请选择登录角色</h3>
        <el-row class="row-bg" justify="center" style="padding-top: 20px;">
            <el-button type="primary" @click="login2">维修工程师登录</el-button>
            <el-button type="primary" @click="login3">管理员登录</el-button>
        </el-row>
    </el-card>
    <div class="background-container"></div>
</div>
</template>

<script setup>
import router from '@/router';

function login2() {
    router.push('/repairerLogin');
}

function login3() {
    router.push('/login');
}
</script>

<style scoped>
.login-container-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    //background-image: url('@/frontend/login-bg-3.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.login-title {
    text-align: center;
}

/* 修改后的背景样式 */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: lightskyblue;
    background-image: url('/login-bg-4.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

</style>